<template>
    <div>
        <div id="login">
            <div id="login-head">
                <div class="login-head-one">
                    <div class="login-head-img">
						<!-- 返回主页 -->
                        <el-tooltip class="item" effect="light" content="返回主页" placement="right">
                            <img class="login-img-xh" @click="returnIndex()" src="../../assets/login/schoolname.png">
			            </el-tooltip>
                    </div>
                </div>
            </div>
            <div class="mid">
                <div class="login_div">
                    <div class="login">
                        <el-form autocomplete="on" :model="loginForm" ref="loginForm" label-position="left">
                            <el-form-item>
                                <span class="login-title color-main">登录</span>
                            </el-form-item>

							<!-- 用户名输入框 -->
                            <el-form-item :inline="true" prop="username">
                                <span style="float: left">用户名：</span>
                                <el-input prefix-icon="el-icon-user-solid" style="width: 190px" name="username" type="text" v-model="loginForm.userName" autocomplete="on" placeholder="请输入用户名">
                                </el-input>
                            </el-form-item>

							<!-- 密码输入框 -->
                            <el-form-item prop="password">
                                <span style="float: left">密&ensp;&ensp;码：</span>
                                <el-input prefix-icon="el-icon-lock" style="width: 190px" name="password" type="password" v-model="loginForm.userPassword" autocomplete="on" placeholder="请输入密码">
                                </el-input>
                            </el-form-item>

							<!-- 验证码 -->
							<div style="height: 30px" prop="verificationCode">
								<span style="float: left;font-size: 14px">验证码：</span>
								<el-input v-model="loginForm.name" style="width: 90px" size="mini" placeholder="验证码" />
                                <img class="verifycode" style="width: 90px;height: 90%" @click="getVerificationImg()" :src="this.verificationImg">
                            </div>


                            <div class="forgetdiv">
                                <a @click="forgetDialogVisible = true">忘记密码？</a>
                            </div>

							<!-- 登录按钮 -->
                            <el-form-item style="margin-bottom: 10px">
                                <el-button style="width: 100%" type="primary" :loading="loading" @click="login()">登录</el-button>
                            </el-form-item>

							<div style="width: 100%; height: 20px">
								<span style="color: red">{{this.loginTip}}</span>
							</div>
                        </el-form>
                        <div class="tips">
                            <img class="img_tips" src="../../assets/login/tips.svg">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Bottombar></Bottombar>

		<!-- 忘记密码，修改 -->
		<el-dialog
            v-model="forgetDialogVisible"
            title="修改密码"
            width="50%"
        >
			<img style="width: 30%; height: 40%; float: left; margin-top: 15%" src="../../assets/login/newpwd.png">
            <el-form style="width: 60%; margin: auto; float: left; margin-left: 10%" :model="userForm">
				<!-- 账号 -->
                <el-form-item label="账&ensp;&ensp;&ensp;&ensp;号">
                    <el-input @input="judgeUserName()" class="newpwd-input" v-model="userForm.username" autocomplete="off"></el-input>
					<span class="newpwd-tip">{{userNameTip}}</span>
                </el-form-item>
				<!-- 姓名 -->
                <el-form-item label="姓&ensp;&ensp;&ensp;&ensp;名">
                    <el-input @input="judgeUName()" class="newpwd-input" v-model="userForm.name" autocomplete="off"></el-input>
					<span class="newpwd-tip">{{nameTip}}</span>
                </el-form-item>
				<!-- 身份证号 -->
				<el-form-item label="身份证号">
                    <el-input @input="judgeName()" class="newpwd-input" v-model="userForm.identity" autocomplete="off"></el-input>
					<span class="newpwd-tip">{{identityTip}}</span>
                </el-form-item>
				<!-- 新密码 -->
				<el-form-item label="新&ensp;密&ensp;码">
                    <el-input @input="judgeId()" class="newpwd-input" v-model="userForm.newPassword" type="password" autocomplete="off" placeholder="密码由6-14位大小写字母、数字组成"></el-input>
					<img src="../../assets/login/pwdsame.svg" style="width: 25px; height: 25px" v-show="pwdOK">
					<span class="newpwd-tip">{{pwdTip}}</span>
                </el-form-item>
				<!-- 确认密码 -->
				<el-form-item label="确认密码">
                    <el-input @input="judgeSame()" class="newpwd-input" v-model="secondPwd" type="password" autocomplete="off"></el-input>
					<img src="../../assets/login/pwdsame.svg" style="width: 25px; height: 25px" v-show="pwdOK">
					<span class="newpwd-tip">{{secondTip}}</span>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="closeUpdataDia()">取消</el-button>
                    <el-button type="primary" @click="confirmUpdate()">修改</el-button>
                </span>
            </template>
        </el-dialog>

		<!-- 修改成功 -->
		<el-dialog
            v-model="newSuccessDialogVisible"
            width="30%"
        >
			<div style="width: 100%; height: 40%;">
				<img style="width: 60%; height: 40%; margin: auto" src="../../assets/login/updated.png">
			</div>
			<span style="width: 70%; height: 30px; margin: auto; font-size: 20px">修改成功！</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="newSuccessDialogVisible = false">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>

import {ElMessage } from 'element-plus'

import Bottombar from '../../components/Bottombar'

import request from '../../utils/request'

import qs from 'qs'

let Base64 = require('js-base64').Base64

export default {
	name: 'Login',
	// eslint-disable-next-line vue/no-unused-components
	components: { Bottombar, ElMessage },
	data() {
		return {
			loginForm: { // 登录信息
				userName: '',
				userPassword: '',
				name: ''
			},
			verificationImg: '/api/get-verify-code',
			loginTip: '',
			userForm: { // 修改密码信息
				username: '',
				name: '',
				identity: '',
				newPassword: ''
			},
			secondPwd: '',
			forgetDialogVisible: false,
			newSuccessDialogVisible: false,
			pwdOK: false,
			// 输入提示
			userNameTip: '',
			nameTip: '',
			identityTip: '',
			pwdTip: '',
			secondTip: ''
		}
	},
	mounted() {
		window.addEventListener('keydown',this.keyDown);
	},
	created() {
		this.getVerificationImg();
	},
	destroyed() {
		window.removeEventListener('keydown',this.keyDown,false);
	},
	methods: {

		// 回车登录
		keyDown(e) {
			//如果是回车则执行登录方法
			if (e.keyCode === 13) {
				this.login();
				//console.log(this.$store.token)
			}
		},

		returnIndex() {
			this.$router.push('/');
		},

		// 更换验证码图片
		getVerificationImg() {
			// 生成一个随机数（防止缓存）
			this.verificationImg = '/api/get-verify-code?' + new Date().getTime();
			this.loginForm.name = '';
		},

		// 登录
		login() {
			if ((this.loginForm.userName === '' || this.loginForm.userName === undefined || this.loginForm.userName === null) && (this.loginForm.userPassword === '' || this.loginForm.userPassword === undefined || this.loginForm.userPassword === null)) {
				this.loginTip = '账号和密码不能为空';
				setTimeout(() => {
					this.loginTip = ''
				}, 2000);
			} else if ((this.loginForm.userPassword === '' || this.loginForm.userPassword === undefined || this.loginForm.userPassword === null) && this.loginForm.userName !== '') {
				this.loginTip = '密码不能为空';
				setTimeout(() => {
					this.loginTip = ''
				}, 2000);
			} else if ((this.loginForm.userName.includes(' ') || this.loginForm.userPassword.includes(' '))) {
				this.loginTip = '名字或密码含有空格';
				setTimeout(() => {
					this.loginTip = ''
				}, 2000);
			} else if ((this.loginForm.userName === '' || this.loginForm.userName === undefined || this.loginForm.userName === null) && this.loginForm.userPassword !== '') {
				this.loginTip = '账号不能为空';
				setTimeout(() => {
					this.loginTip = ''
				}, 2000);
			} else if (this.loginForm.name === '') {
				this.loginTip = '请输入验证码';
				setTimeout(() => {
					this.loginTip = ''
				}, 2000);
			} else {
				request({
					method: 'post',
					url: '/api/user/login',
					data: {
						userName: Base64.encode(this.loginForm.userName),
						userPassword: Base64.encode(this.loginForm.userPassword),
						name: this.loginForm.name
					}
				}).then(res => {
					let code = res.code;

					if (code === 400) {	// 验证码错误
						ElMessage.warning(res.message);
						this.getVerificationImg();
					} else if (code === 200) {	// 登录成功
						this.$store.commit('SET_TOKEN',res.data.token);
						console.log(res.data.token);
						this.$router.push('/dist/homesys');
						this.$notify.success({
							title: '欢迎你',
							message: res.message,
							duration: 3000
						})
					} else if (code === 401) {	// 用户不存在提示
						ElMessage.warning(res.message);
						this.getVerificationImg()
					} else if (code === 0) {	// 密码错误
						ElMessage.warning(res.message);
						this.getVerificationImg();
					}
				})
			}
		},

		// 修改密码输入判断
		judgeUserName() {
			if (this.userForm.username !== '') {
				this.userNameTip = '';
			}
		},
		judgeUName() {
			if (this.userForm.username === '') {
				this.userNameTip = '请输入账号';
			} else {
				this.userNameTip = '';
			}
			if (this.userForm.name !== '') {
				this.nameTip = '';
			}
		},
		judgeName() {
			if (this.userForm.name === '') {
				this.nameTip = '请输入姓名';
			} else {
				this.nameTip = '';
			}
			if (this.userForm.identity.length > 18) {
				this.identityTip = '身份证号码为18位';
			} else if (this.userForm.identity !== '') {
				this.identityTip = '';
			}
			this.judgeUName();
		},
		judgeId() {
			if (this.userForm.identity === '') {
				this.identityTip = '请输入身份证号';
			} else {
				this.identityTip = '';
			}
			this.pwdOK = false;
			let containZS = /^[0-9a-zA-Z]*$/;
			if (this.userForm.newPassword.length < 6 || this.userForm.newPassword.length > 14) {
				this.pwdTip = '密码长度为6-14位';
			} else if (containZS.test(this.userForm.newPassword) === false) {
				this.pwdTip = '密码由字母或数字组成';
			} else if (this.secondPwd === this.userForm.newPassword) {
				this.pwdOK = true;
				this.pwdTip = '';
				this.secondTip = '';
			} else if (this.secondPwd !== this.userForm.newPassword) {
				this.pwdOK = false;
				this.secondTip = '两次密码不一致';
				this.pwdTip = '';
			} else if (this.userForm.newPassword !== '') {
				this.pwdTip = '';
			}
			this.judgeName();
		},
		// 判断两次是否相等
		judgeSame() {
			if (this.userForm.newPassword === '') {
				this.pwdOK = false;
				this.secondTip = '先输入新密码';
			} else if (this.secondPwd !== this.userForm.newPassword) {
				this.pwdOK = false;
				this.secondTip = '两次密码不一致';
			} else if (this.secondPwd.length < 6 || this.secondPwd.length > 14) {
				this.pwdOK = false;
				this.secondTip = '密码长度为6-14位';
			} else {
				this.pwdOK = true;
				this.secondTip = '';
			}
		},
		// 修改密码
		confirmUpdate() {
			if (this.userForm.username !== '' && this.userForm.name !== '' && this.userForm.identity !== '' && this.pwdOK === true) {
				request({
					method: 'post',
					url: '/api/user/update-password',
					headers: {
						'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
					},
					data: qs.stringify({
						'username': Base64.encode(this.userForm.username),
						'name': Base64.encode(this.userForm.name),
						'identity': Base64.encode(this.userForm.identity),
						'newPassword': Base64.encode(this.userForm.newPassword)
					}),
				}).then(res => {
					if (res.code === 200) {
						this.newSuccessDialogVisible = true;
					} else if (res.code === 400) {
						ElMessage.warning(res.message);
					}
				})
			} else {
				if (this.userForm.username === '') {
					this.userNameTip = '请输入账号';
				}
				if (this.userForm.name === '') {
					this.nameTip = '请输入姓名';
				}
				if (this.userForm.identity === '') {
					this.identityTip = '请输入身份证号';
				}
				if (this.userForm.newPassword === '') {
					this.pwdTip = '请输入新密码';
				}
			}
		},
		// 取消修改按钮
		closeUpdataDia() {
			this.forgetDialogVisible = false;
			this.userForm.username = '';
			this.userForm.name = '';
			this.userForm.identity = '';
			this.userForm.newPassword = '';
			this.secondPwd = '';
			this.userNameTip = '';
			this.nameTip = '';
			this.identityTip = '';
			this.pwdTip = '';
			this.pwdOK = false;
		}
	},
}
</script>

<style lang="less">
@import "/src/less/login/login.less";


#login {
  margin: 0 auto;
  padding: 0;
  border: 0;
  width: 100%;
  height: 710px;
}


</style>
